<!-- 功能介绍 -->
<template>
  <div class="container">
    <headerNav />
    <!-- 功能介绍 -->
    <div class="introduce_top" :class="isShow ? ' active' : ''">
      <div class="introduce_box mindWidth">
        <!-- <div class="introduce_top_L">功能介绍</div> -->
        <div class="introduce_top_L">
          <span @click="$router.push('/')">首页</span>>
          <span>功能介绍</span>
        </div>
        <div class="introduce_top_R">
          <ul>
            <li @click="hanldeClick(0)">
              <a href="#0" :class="isactive == 0 ? 'active' : ''">政策资讯</a>
            </li>
            <li>|</li>
            <li @click="hanldeClick(1)">
              <a href="#1" :class="isactive == 1 ? 'active' : ''">科创数据</a>
            </li>
            <li>|</li>
            <li @click="hanldeClick(2)">
              <a href="#2" :class="isactive == 2 ? 'active' : ''">推广服务</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="introduce_bg">
      <div class="introduce_text">
        <h3>政策尽知 红利尽享</h3>
        <p>
          <span>提供政策查询、订阅、解读、统计分析等全方位服务</span>
          <span>高效便捷，加速获取政策红利</span>
        </p>
      </div>
    </div>
    <div class="introduce_main mindWidth">
      <!-- 第一模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L">
          <img src="../../../static/image/intrduce/query.png" alt />
        </div>
        <div class="introduce_centent_R">
          <div class="introduce_centent_top">
            <span>政策查询</span>，快速精准
          </div>
          <div class="introduce_centent_center">
            <p>
              · 通过 首页>「搜素框」>「查政策」 或
              导航栏>「政策资讯」>「政策通知」
              功能，输入你需要查询的关键词及筛选条件，进行查询。
            </p>
            <p>·「政策通知」功能默认根据你当前所在地，展示该地的政策通知。</p>
            <p>
              ·
              点击部门名称可进入部门主页，查看该部门所发布的政策通知。点击「去官网」可进入该部门官网。
            </p>
            <span>▶立即体验</span>
          </div>
        </div>
      </div>
      <!-- 第二模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L" style="float: right">
          <img src="../../../static/image/intrduce/subscription.png" alt />
        </div>
        <div class="introduce_centent_R" style="float: left">
          <div class="introduce_centent_top">
            <span>政策订阅</span>，资讯快人一步
          </div>
          <div class="introduce_centent_center">
            <p>
              1.通过点击 导航栏>「政策资讯」>「政策订阅」
              或其他页面中的「订阅」按钮，订阅相关部门。
            </p>
            <p>2.关注「比目镜」微信服务号，当你所订阅的部门有新政策资讯发布，会第一时间通过微信推送给你查阅。</p>
            <span>▶立即体验</span>
          </div>
        </div>
      </div>
      <!-- 第三模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L">
          <img src="../../../static/image/intrduce/unscramble.png" alt />
        </div>
        <div class="introduce_centent_R">
          <div class="introduce_centent_top">
            <span>政策解读</span>，申报更清晰
          </div>
          <div class="introduce_centent_center">
            <p>
              ·通过 首页>「政策解读」或
              导航栏>「政策资讯」>「政策解读」，查看相关政策项目申报详情，包括「申请条件」、「支持力度」、「申报材料」、「项目来源」。
            </p>
            <p>·可根据关键词及相关地区条件，进行精准查询。</p>

            <span>▶立即体验</span>
          </div>
        </div>
      </div>
      <!-- 第四模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L" style="float: right">
          <img src="../../../static/image/intrduce/atlas.png" alt />
        </div>
        <div class="introduce_centent_R" style="float: left">
          <div class="introduce_centent_top">
            <span>政策图谱</span>，把握大局
          </div>
          <div class="introduce_centent_center">
            <p>
              ·通过
              导航栏>「政策资讯」>「政策图谱」功能，动态可视化展示全国各地的政策数量概况以及各个地区部门的细分情况。
            </p>
            <span>▶立即体验</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 科创介绍 -->
    <a name="#1" id="1"></a>
    <div class="introduce_bg">
      <div class="introduce_text">
        <h3>企业创新情况，查科创数据</h3>
        <p>
          <span>600w+企业科创数据，满足各类场景的商业应用：数据查询、对比分析、汇总统计</span>
          <span>畅享数据价值，挖掘企业创新潜力</span>
        </p>
      </div>
    </div>
    <div class="introduce_main mindWidth">
      <!-- 第一模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L">
          <img src="../../../static/image/intrduce/enterprise.png" alt />
        </div>
        <div class="introduce_centent_R">
          <div class="introduce_centent_top">
            <span>查企业</span>，挖掘科创价值
          </div>
          <div class="introduce_centent_center">
            <p>
              ·通过 首页>「搜素框」>「查企业」 或 导航栏>「科创数据」>「查企业」
              功能，根据你输入的企业关键词进行查询。企业信息包括「荣誉资质」、「专利」、「商标」、「软著」等科创数据。
            </p>
            <p>·「关注」企业，可接受比目镜公众号推送企业最新动态及专利缴费提醒。</p>

            <span>▶立即体验</span>
          </div>
        </div>
      </div>
      <!-- 第二模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L" style="float: right">
          <img src="../../../static/image/intrduce/comparison.png" alt />
        </div>
        <div class="introduce_centent_R" style="float: left">
          <div class="introduce_centent_top">
            <span>企业对比</span>，一目尽览差异
          </div>
          <div class="introduce_centent_center">
            <p>
              ·通过 导航栏>「科创数据」>「企业对比」
              功能，可同时对比5家企业的科创数据及详情。
            </p>
            <p>·可「分享」到手机端给企业客户展示，「导出」下载对比数据到本地。</p>
            <span>▶立即体验</span>
          </div>
        </div>
      </div>
      <!-- 第三模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L">
          <img src="../../../static/image/intrduce/project.png" alt />
        </div>
        <div class="introduce_centent_R">
          <div class="introduce_centent_top">
            <span>项目查询</span>，企业名单都在这
          </div>
          <div class="introduce_centent_center">
            <p>
              ·通过
              导航栏>「科创数据」>「项目查询」功能，可查询已通过项目的相关企业名单。
            </p>

            <span>▶立即体验</span>
          </div>
        </div>
      </div>
      <!-- 第四模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L" style="float: right">
          <img src="../../../static/image/intrduce/project_atlas.png" alt />
        </div>
        <div class="introduce_centent_R" style="float: left">
          <div class="introduce_centent_top">
            <span>项目图谱</span>，一手尽观全局
          </div>
          <div class="introduce_centent_center">
            <p>
              ·通过
              导航栏>「科创数据」>「项目图谱」功能，以地图形式展现全国各地已通过的项目企业数量及分布情况。
            </p>
            <span>▶立即体验</span>
          </div>
        </div>
      </div>
      <!-- 第五模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L">
          <img src="../../../static/image/intrduce/garden_centre.png" alt />
        </div>
        <div class="introduce_centent_R">
          <div class="introduce_centent_top">
            <span>园区中心</span>，企业资源剖析
          </div>
          <div class="introduce_centent_center">
            <p>·通过 导航栏>「园区中心」功能，查询各园区企业数量及科创数据。</p>

            <span>▶立即体验</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 推广服务 -->
    <a name="#2" id="2"></a>
    <div class="introduce_bg">
      <div class="introduce_text">
        <h3>生态圈营销赋能，互利共赢</h3>
        <p>
          <span>整合平台资源，助力个人、企业、服务商及园区的品牌推广</span>
          <span>让业务传播更快，辐射更广</span>
        </p>
      </div>
    </div>
    <div class="introduce_main mindWidth">
      <!-- 第一模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L">
          <img src="../../../static/image/intrduce/micro_card.png" alt />
        </div>
        <div class="introduce_centent_R">
          <div class="introduce_centent_top">
            <span>微名片</span>，传播快功能全
          </div>
          <div class="introduce_centent_center">
            <p>
              ·
              比目镜微信小程序，可快速创建个人名片，为个人业业务传播、人脉搭建提供便捷有效途径。
            </p>
            <p>
              ·
              创建个人名片后，手机分享相关政策资讯，会在底部展示名片，获取客户线索。
            </p>

            <span>▶立即体验</span>
          </div>
        </div>
      </div>
      <!-- 第二模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L" style="float: right">
          <img src="../../../static/image/intrduce/service_provider.png" alt />
        </div>
        <div class="introduce_centent_R" style="float: left">
          <div class="introduce_centent_top">
            <span>严选服务商</span>，供需精准匹配
          </div>
          <div class="introduce_centent_center">
            <p>
              ·
              比目镜欢迎各大优质服务商进驻，并为服务商提供相应的产品服务展示曝光，让平台的企业用户能轻松获取优质服务，同时让服务商可以触达更多精准客户，实现共赢。
            </p>

            <span>▶立即体验</span>
          </div>
        </div>
      </div>
      <!-- 第三模块 -->
      <div class="introduce_centent">
        <div class="introduce_centent_L" style="width: 523px; height: 455px">
          <img
            src="../../../static/image/intrduce/wisdom.png"
            style="width: 100%; height: 100%"
            alt
          />
        </div>
        <div class="introduce_centent_R">
          <div class="introduce_centent_top">
            <span>智慧园区</span>，信息化赋能
          </div>
          <div class="introduce_centent_center">
            <p>
              ·
              智慧园区解决方案，为园区及在内企业提供科创数据统计展示、企业业务宣传曝光、园区物业管理提供一站式智能化数据服务。
            </p>

            <span>▶了解详情</span>
          </div>
        </div>
      </div>
    </div>
    <footerNav />
    <navigation />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isactive: 0, // 动态类名样式
      isShow: false, // 添加固定窗口
      scrollTop: 0 // 滚动页面的高度
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    hanldeClick(index) {
      this.isactive = index;
    },

    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(this.scrollTop);
      if (this.scrollTop >= 300) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //绑定页面滚动事件
    window.addEventListener("scroll", this.handleScroll);
    // 页面一加载就获取地址栏的type
    if (this.$route.query) {
      let { type } = this.$route.query;
      if (type == 2) {
        document.documentElement.scrollTop = 5940; // 5940
      } else if (type == 1) {
        document.documentElement.scrollTop = 2792; //2792
      }
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  background: #fff;
  .introduce_top {
    max-width: 1920px;
    min-width: 1200px;
    background-color: #fff;
    &.active {
      position: fixed;
      min-width: 1920px;
      z-index: 999;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
      top: 20px;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .introduce_box {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .introduce_top_L {
        color: rgba(16, 16, 16, 100);
        // font-size: 20px;
        font-family: SourceHanSansSC-bold;
        // font-weight: 700;
        span {
          font-size: 14px;
          cursor: pointer;
          margin: 0 10px;
        }
      }
      .introduce_top_R {
        ul {
          display: flex;
          align-items: center;
          li {
            font-size: 14px;
            color: #ccc;
            &:nth-child(2n) {
              margin: 0 20px;
            }
            a {
              color: #000;
              &.active {
                color: #44a2ff;
              }
            }
          }
        }
      }
    }
  }
  .introduce_bg {
    position: relative;
    margin-top: 80px;
    // transform: translate(-50%, -50%);
    max-width: 1920px;
    overflow: hidden;
    height: 500px;
    width: 100%;
    margin: 0 auto;
    background-image: url("../../../static/image/intrduce/bg.png");

    background-position: center center;
    .introduce_text {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      h3 {
        color: #fff;
        font-size: 52px;
      }
      p {
        font-size: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        line-height: 40px;
      }
    }
  }
  .introduce_main {
    margin-top: 155px;
    .introduce_centent {
      overflow: hidden;
      margin-bottom: 120px;
      .introduce_centent_L {
        float: left;
        height: 378px;

        img {
          height: 100%;
        }
      }
      .introduce_centent_R {
        float: right;
        width: 492px;

        .introduce_centent_top {
          font-size: 36px;
          font-weight: 700;
          margin-bottom: 12px;
          span {
            color: #44a2ff;
          }
        }
        .introduce_centent_center {
          display: flex;
          flex-direction: column;
          color: rgba(142, 142, 142, 100);
          font-size: 18px;
          p {
            line-height: 36px;
          }
          span {
            color: #44a2ff;
            margin-top: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
